1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
// app/vendor/quotations/page.tsx
import * as React from "react";
import Link from "next/link";
import { Metadata } from "next";
import { getServerSession } from "next-auth/next";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { LogIn } from "lucide-react";
import { Shell } from "@/components/shell";
import {
TECH_SALES_QUOTATION_STATUSES,
TECH_SALES_QUOTATION_STATUS_CONFIG
} from "@/db/schema";
import { getQuotationStatusCounts } from "@/lib/techsales-rfq/service";
import { VendorQuotationsTable } from "@/lib/techsales-rfq/vendor-response/table/vendor-quotations-table";
export const metadata: Metadata = {
title: "기술영업 견적서 관리",
description: "기술영업 RFQ 견적서를 관리합니다.",
};
export default async function VendorQuotationsPage() {
// 세션 확인
const session = await getServerSession(authOptions);
console.log(session, "session")
console.log(session?.user, "session?.user")
console.log(session?.user.techCompanyId, "session?.user.techCompanyId")
if (!session?.user) {
return (
<Shell>
<div className="flex min-h-[400px] flex-col items-center justify-center space-y-4">
<div className="text-center">
<h2 className="text-2xl font-bold tracking-tight">로그인이 필요합니다</h2>
<p className="text-muted-foreground">
견적서를 확인하려면 로그인해주세요.
</p>
</div>
<Button asChild>
<Link href="/api/auth/signin">
<LogIn className="mr-2 h-4 w-4" />
로그인
</Link>
</Button>
</div>
</Shell>
);
}
// 벤더 ID 확인 (사용자의 회사 ID가 벤더 ID)
const vendorId = session.user.techCompanyId;
if (!vendorId) {
return (
<Shell>
<div className="flex min-h-[400px] flex-col items-center justify-center space-y-4">
<div className="text-center">
<h2 className="text-2xl font-bold tracking-tight">기술영업 벤더 정보가 없습니다</h2>
<p className="text-muted-foreground">
기술영업 벤더 정보가 없습니다. 관리자에게 문의하세요.
</p>
</div>
</div>
</Shell>
);
}
// 견적서 상태별 개수 조회
const statusCountsPromise = getQuotationStatusCounts(vendorId.toString(), "SHIP");
return (
<Shell variant="fullscreen" className="h-full">
{/* 고정 헤더 영역 */}
<div className="flex-shrink-0">
<div className="flex-shrink-0 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div>
<h1 className="text-3xl font-bold tracking-tight">기술영업 견적서</h1>
<p className="text-muted-foreground">
할당받은 RFQ에 대한 견적서를 작성하고 관리합니다.
</p>
</div>
</div>
{/* 상태별 개수 카드 */}
<div className="flex-shrink-0">
<React.Suspense
fallback={
<div className="w-full overflow-x-auto">
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 min-w-fit">
{Array.from({ length: 5 }).map((_, i) => (
<Card key={i} className="min-w-[160px]">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium truncate">로딩중...</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">-</div>
</CardContent>
</Card>
))}
</div>
</div>
}
>
<StatusCards statusCountsPromise={statusCountsPromise} />
</React.Suspense>
</div>
{/* 견적서 테이블 */}
<div className="flex-1 min-h-0 overflow-hidden">
<div className="h-full overflow-auto">
<VendorQuotationsTable vendorId={vendorId.toString()} rfqType="SHIP" />
</div>
</div>
</div>
</Shell>
);
}
// 상태별 개수 카드 컴포넌트
async function StatusCards({
statusCountsPromise,
}: {
statusCountsPromise: Promise<{
data: { status: string; count: number }[] | null;
error: string | null;
}>;
}) {
const { data: statusCounts, error } = await statusCountsPromise;
if (error || !statusCounts) {
return (
<div className="w-full overflow-x-auto">
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 min-w-fit">
<Card className="min-w-[160px]">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium truncate">오류</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-red-600">-</div>
<p className="text-xs text-muted-foreground truncate">
데이터를 불러올 수 없습니다
</p>
</CardContent>
</Card>
</div>
</div>
);
}
// 중앙화된 상태 설정 사용
const statusEntries = Object.entries(TECH_SALES_QUOTATION_STATUSES).map(([, statusValue]) => ({
key: statusValue,
...TECH_SALES_QUOTATION_STATUS_CONFIG[statusValue]
}));
console.log(statusCounts, "statusCounts")
return (
<div className="w-full overflow-x-auto">
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 min-w-fit">
{statusEntries.map((status) => (
<Card key={status.key} className="min-w-[160px]">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium truncate">{status.label}</CardTitle>
</CardHeader>
<CardContent>
<div className={`text-2xl font-bold ${status.color}`}>
{statusCounts.find(item => item.status === status.key)?.count || 0}
</div>
<p className="text-xs text-muted-foreground truncate">
{status.description}
</p>
</CardContent>
</Card>
))}
</div>
</div>
);
}
|
